// 引入富文本文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  // 注册局部组件
  components: {
    quillEditor
  },
  data () {
    return {
      activeStep: 1,
      activeName: 'one',
      // 添加商品表单对象
      addGoodsForm: {
        goods_name: '',
        goods_cat: [],
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: '',
        isPromotion: 'true'
      },
      // 级联选择器数据
      options: [],
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name'
      },
      options1: [
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      // 商品图片用到的属性
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        Authorization: localStorage.getItem('token')
      },
      // 富文本
      editorOption: {
        placeholder: '请输入您帅气的文字'
      },
      htmlStr: "<h1 class='red'>我是h1</h1>"
    }
  },
  created () {
    this.loadCategoriesList()
  },
  methods: {
    /**
     * 点击标签页
     */
    tabClick (curTab) {
      console.log('点击了标签页:', curTab.index)
      this.activeStep = +curTab.index + 1
    },
    /**
     * 下一步
     */
    next (name, index) {
      // name : tab-pane的别名
      // index 是步骤的索引
      this.activeName = name
      this.activeStep = index
    },
    /**
     * 获取分类 (三层)
     */
    async loadCategoriesList () {
      let res = await this.$axios.get('categories', {
        params: {
          type: 3
        }
      })

      console.log(res)
      this.options = res.data.data
    },
    /**
     * 商品图片用到的事件
     */
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 上传图片成功
     */
    uploadSuccess (res) {
      // console.log(res.data.tmp_path)
      this.addGoodsForm.pics.push({
        pic: res.data.tmp_path
      })
    },
    /**
     * 添加商品
     */
    async addGoods () {
      // 1.先从 addGoodsForm 获取出来属性,需要的就直接用,该处理的就处理
      /* eslint-disable */
      const {
        goods_name,
        goods_cat,
        goods_price,
        goods_number,
        goods_weight,
        goods_introduce,
        pics
      } = this.addGoodsForm

      // 发送请求
      let res = await this.$axios.post('goods', {
        goods_name,
        goods_cat: goods_cat.join(','),
        goods_price,
        goods_number,
        goods_weight,
        goods_introduce,
        pics
      })

      console.log(res)

      this.$router.push('/goods')
    }
  }
}
